<template>
	<!-- 发布动态 -->
	<Top-Page class="release-dynamic-box">
		<NavBar
			title="发布人脉圈"
			leftText="取消"
			rightText="发表"
			@click-left="onClickLeft(1)"
			@click-right="onClickRight"
			style="box-shadow: none; border-bottom: 1rpx solid #d6d6d6"
		></NavBar>

		<!-- 发布文本 -->
		<textarea
			class="release__text"
			maxlength="3000"
			auto-height
			v-model="value"
			placeholder="说点什么吧..."
			placeholder-style="color:#A8A8A8"
		/>

		<!-- 发布图片 -->
		<view class="release__imgs">
			<view class="works-item" v-for="(item, index) in files">
				<video
					v-if="item.type === 'video'"
					class="works-item__image"
					:src="item.tempFilePath"
					mode="aspectFill"
				/>

				<image
					v-else
					class="works-item__image"
					:src="item.path"
					mode="aspectFill"
					@click="handlePreviewImage(index)"
				/>

				<view @click="handleRemoveFile(index)" class="close-css_icon"></view>
			</view>

			<!-- 选择图片 -->
			<view
				class="works-item cross-css_icon add-image"
				v-show="files.length < 9"
				@click="handleChooseFiles"
			></view>
		</view>

		<!-- 所在位置 -->
		<!-- <view class="unit-box positioning-box" @click="toPositioning">
      <image class="unit-img_icon" src="../../../static/image/friend/location.png" mode="" />
      <view class="">所在位置</view>
    </view> -->

		<!-- 提醒谁看 -->
		<view class="unit-box positioning-box" @click="toRemind('remind')">
			<image
				class="unit-img_icon"
				src="../../../static/image/friend/aite.png"
			/>

			<view class="">提醒谁看</view>
		</view>

		<view
			class="remind-list individual-list"
			v-if="remindObjList.individual && remindObjList.individual.length"
		>
			<image
				class="remind-list-item individual-list-item_img"
				v-for="it in remindObjList.individual"
				:src="it.avatar"
			/>
		</view>

		<view
			class="remind-list label-list"
			v-if="remindObjList.label && remindObjList.label.length"
		>
			<view
				class="remind-list-item label-list-item"
				v-for="it in remindObjList.label"
			>
				<image
					class="label-list-itemimg_icon"
					src="../../../static/image/friend/label-1.png"
				/>
				{{ it.title }}
			</view>
		</view>

		<!-- 谁可以看 -->
		<view class="unit-box" @click="show = !show">
			<image class="unit-img_icon" src="../../../static/image/friend/eye.png" />

			<view class="unit-box-right">
				<view class="">{{ current == 3 ? '谁不可以看' : '谁可以看' }}</view>
				<view class="unit-status">
					{{ current == 0 ? '公开' : current == 1 ? '私密' : '' }}
				</view>
			</view>
		</view>

		<template v-if="current == 2 || current == 3">
			<view
				class="remind-list individual-list"
				v-if="filtrate.individual && filtrate.individual.length"
			>
				<image
					class="remind-list-item individual-list-item_img"
					v-for="it in filtrate.individual"
					:src="it.avatar"
				/>
			</view>

			<view
				class="remind-list label-list"
				v-if="filtrate.label && filtrate.label.length"
			>
				<view
					class="remind-list-item label-list-item"
					v-for="it in filtrate.label"
				>
					<image
						class="label-list-itemimg_icon"
						src="../../../static/image/friend/label-1.png"
					/>
					{{ it.title }}
				</view>
			</view>
		</template>

		<Popup v-model:show="show" position="bottom" round class="watch-popup">
			<view class="title">谁可以看</view>
			<radio-group @change="radioChange">
				<label class="watch-item border-bottom-after">
					<radio class="radio-left" :value="0" :checked="current == 0" />
					<veiw class="radio-right">
						<view class="radio-right-title">公开</view>
						<view class="watch-item-sub">所有朋友可见</view>
					</veiw>
				</label>

				<label class="watch-item border-bottom-after">
					<radio class="radio-left" :value="1" :checked="current == 1" />
					<veiw class="radio-right">
						<view class="radio-right-title">私密</view>
						<view class="watch-item-sub">仅自己可见</view>
					</veiw>
				</label>

				<label class="watch-item border-bottom-after">
					<radio class="radio-left" :value="2" :checked="current == 2" />
					<veiw class="radio-right">
						<view class="radio-right-title">部分可见</view>
					</veiw>
				</label>

				<view
					class="hint-wrap"
					v-if="current == 2"
					@click="toRemind('visible')"
				>
					<view class="hint-title">选择朋友</view>
					<view class="watch-item-sub">选中的朋友可见</view>
				</view>

				<label class="watch-item">
					<radio class="radio-left" :value="3" :checked="current == 3" />
					<veiw class="radio-right">
						<view class="radio-right-title">不给谁看</view>
					</veiw>
				</label>

				<view
					class="hint-wrap"
					v-if="current == 3"
					@click="toRemind('invisible')"
				>
					<view class="hint-title">选择朋友</view>
					<view class="watch-item-sub">选中的朋友不可见</view>
				</view>
			</radio-group>
		</Popup>
	</Top-Page>
</template>

<script>
	import Popup from "@/components/Popup/Popup.vue";
	import NavBar from "@/components/NavBar/NavBar.vue";
	import { navBack } from "@/utils/utils.js";
	import {
		chooseFiles,
		removeFile,
		uploadFiles,
		previewImage,
	} from "@/utils/fileUtils.js";
	import pinia from "@/store/index";
	import { useFriendStore } from "@/store/friend.js";
	const friendStore = useFriendStore(pinia);

	export default {
		data() {
			return {
				navBack: navBack,
				show: false,
				current: friendStore.current || 0,

				value: friendStore.releaseValue || "",
				files: friendStore.releaseImgs.length ? friendStore.releaseImgs : [], // 存储选择的图片文件
				remindObjList: friendStore.remindObjList,
				filtrate: friendStore.filtrate,
			};
		},
		components: { NavBar, Popup },
		watch: {
			value(val) {
				friendStore.changeReleaseValue(val);
			},
			files: {
				handler(imgs) {
					friendStore.changeReleaseImgs(imgs);
				},
				deep: true,
			},
		},
		methods: {
			// 处理选择文件
			async handleChooseFiles() {
				try {
					this.files = await chooseFiles(this.files);
					console.log(this.files, "this.files");
				} catch (error) {
					console.error("选择文件失败:", error);
				}
			},
			// 处理删除文件
			handleRemoveFile(index) {
				this.files = removeFile(this.files, index);
			},
			// 处理上传文件
			async handleUploadFiles() {
				try {
					const uploadUrl = this.$api.msgApi.uploadImage; // 替换为你的上传接口地址
					const responses = await uploadFiles(this.files, uploadUrl);
					// console.log('上传成功:', responses);
					return responses;
				} catch (error) {
					// console.error('上传失败:', error);
					uni.showToast({
						title: `${error}`,
						icon: "none",
					});
					return "";
				}
			},
			// 处理图片预览
			handlePreviewImage(index) {
				previewImage(this.files, index);
			},
			//前往 <选择提醒谁看>
			toRemind(type) {
				uni.navigateTo({
					url: `/pages/friend/options/options?type=${type}`,
				});
			},
			//谁可以看
			radioChange(e) {
				this.current = e.detail.value;
				friendStore.changeCurrent(this.current);
			},
			//前往 <所在位置>
			toPositioning() {
				uni.showToast({
					title: "敬请期待",
					icon: "none",
				});
				// uni.navigateTo({
				//   url: '/pages/friend/positioning/positioning'
				// });
			},
			onClickLeft(n = 1) {
				friendStore.changeReleaseValue("");
				friendStore.changeReleaseImgs([]);
				friendStore.changeRemindObjList({});
				friendStore.changeFiltrate({});
				friendStore.changeCurrent(0);

				this.navBack(n);
			},
			async onClickRight() {
				uni.showToast({
					title: "发布中...",
					icon: "loading",
					mask: true,
					duration: 999999,
				});

				//发表的图片
				const responses = await this.handleUploadFiles();
				let status = true;
				let msg = "";

				const files = [];

				responses.forEach((item) => {
					const data = JSON.parse(item.data);
					if (data.code != 0) {
						status = false;
						msg = data.msg;
					}

					files.push(data.data);
				});

				if (!status) {
					uni.showToast({
						title: msg,
						icon: "none",
					});
					return;
				}

				if (!files.length && !this.value) {
					uni.showToast({
						title: "不能发表空的动态",
						icon: "none",
					});
					return;
				}

				//提醒的用户和标签组
				const remind =
					friendStore.remindObjList.individual?.map((item) => item.user_id) ??
					[];
				const label =
					friendStore.remindObjList.label?.map((item) => item.label_id) ?? [];

				//好友/标签的可见与否
				const userIds =
					friendStore.filtrate.individual?.map((item) => item.user_id) ?? [];
				const labels =
					friendStore.filtrate.label?.map((item) => item.label_id) ?? [];

				this.$api.friendCircleApi
					.addCircle({
						img: files,
						content: this.value,
						remind: remind,
						label: label,
						watch_restrictions: {
							type: this.current,
							label_id: labels,
							user_id: userIds,
						},
					})
					.then((res) => {
						const backs =
							remind.length || label.length || userIds.length || labels.length
								? 2
								: 1;

						uni.hideToast();

						uni.showToast({
							title: res.msg,
							icon: "none",
							mask: true,
						});

						if (res.code == 0) this.onClickLeft(backs);
					})
					.catch((err) => {
						uni.hideToast();
						uni.showToast({
							title: String(err),
						});
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
